<template>
  <view class="home">
    <view class="tab_bar">
      <view class="header">
        <view class="title">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#FF69B4"
          >
          </uni-segmented-control>
          <!-- <u-subsection
            :list="items"
            :current="current"
            active-color="#FF69B4df"
            @change="onClickItem"
          ></u-subsection> -->
        </view>
        <view class="iconfont iconsearch"></view>
      </view>
      <view class="content">
        <view v-if="current === 0">
          <recommend></recommend>
        </view>
        <view v-if="current === 1">
          <category></category>
        </view>
        <view v-if="current === 2">
          <album></album>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Recommend from 'components/home/Recommend'
import Category from 'components/home/Category'
import Album from 'components/home/Album'
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
  name: '',
  components: {
    Recommend,

    Category,
    Album,
    uniSegmentedControl,
  },
  data() {
    return {
      items: ['推荐', '分类', '专辑'],
      current: 0,
    }
  },

  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },
  },
}
</script>
<style scoped>
.header {
  position: relative;
  display: flex;
  justify-content: center;
}
.title {
  width: 60%;
}
.iconfont {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}
</style>
